import { IndexBar } from 'antd-mobile'
import { List } from 'antd-mobile'
import { NavBar, SearchBar } from 'antd-mobile'
import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { useDispatch } from 'react-redux'
import { setCitySelect } from '../../store/userSlice'
import { useNavigate, useSearchParams } from 'react-router-dom'
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
    securityJsCode: "a31c43f19f2fb0f629ea518f8d31c21c",
};
function City() {
    const [hotdata, setHotData] = useState([])
    const [city, setcity] = useState([])
    const dispatch = useDispatch()
    const navigate = useNavigate()
    const [param] = useSearchParams()
    const type = param.get('type')
    // const [citycode, setCitycode] = useState('呼和浩特')


    const getCity = async () => {
        const res = await axios.get('/api/city')
        console.log(res);

        const { code, data } = res.data
        if (code == 200) {
            setHotData(data.hotCities)
            setcity(data.city)
        }
    }

    useEffect(() => {
        getCity()
        // getCityCurrent()
    }, [])

    const selectFN = (val) => {
        dispatch(setCitySelect({ type, val }));
        navigate(-1);
    };

    // const getCityCurrent = async () => {
    //     AMapLoader.load({
    //         key: "1e1e81850be144354eeca900dfb0e2fa", //申请好的 Web 端开发者 Key，首次调用 load 时必填
    //         version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    //         plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['AMap.Scale','...','...']
    //     })
    //         .then((AMap) => {
    //             //JS API 加载完成后获取AMap对象
    //             AMap.plugin("AMap.CitySearch", function () {
    //                 var citySearch = new AMap.CitySearch();
    //                 citySearch.getLocalCity(function (status, result) {
    //                     if (status === "complete" && result.info === "OK") {
    //                         // 查询成功，result即为当前所在城市信息
    //                         console.log(1111111, result.city)
    //                         setCitycode(result.city)
    //                     }
    //                 });
    //             });
    //         })
    //         .catch((e) => {
    //             console.log(e);
    //         });
    // }


    return (
        <div>
            <NavBar >  <SearchBar placeholder='请输入内容' /></NavBar>

            <div>
                {/* <div>定位城市</div> <span>{citycode}</span> */}
            </div>

            <div>
                <div>最近访问城市</div>
            </div>

            <div>
                <div>热门城市</div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    {
                        hotdata.map((item) => {
                            return (
                                <div  onClick={() => {
                                    selectFN(item.name);
                                }} key={item.cityId}>{item.name}</div>
                            )
                        })
                    }
                </div>

            </div>

            <div>
                <div>字母排序</div>
                <div style={{ height: window.innerHeight }}>
                    <IndexBar>
                        {city.map((group) => {
                            const { initial, list } = group;
                            return (
                                <IndexBar.Panel
                                    index={initial}
                                    title={`标题${initial}`}
                                    key={`标题${initial}`}
                                >
                                    <List>
                                        {list.map((item, index) => (
                                            <List.Item
                                                key={index}
                                                onClick={() => {
                                                    selectFN(item.name);
                                                }}
                                            >
                                                {item.name}
                                            </List.Item>
                                        ))}
                                    </List>
                                </IndexBar.Panel>
                            );
                        })}
                    </IndexBar>
                </div>
            </div>
        </div>
    )
}

export default City